<template>
    <div class="breeding-section">
        <div class="section-header">
            <h4>{{ title }}</h4>
            <div class="section-actions">
                <el-button type="primary" size="small" plain>设置</el-button>
            </div>
        </div>
        <div class="info-grid">
            <div class="info-row">
                <span class="info-label">生产批次：</span>
                <span class="info-value">{{ batch }}</span>
            </div>
        </div>
        <div class="section-sub-header">
            <h5>相关材料</h5>
        </div>
        <div class="materials-container">
            <div class="materials-list">
                <div class="material-item">
                    <div class="material-image">
                        <img src="https://via.placeholder.com/120" alt="材料图片1" />
                    </div>
                    <el-button type="primary" size="small">检验报告</el-button>
                </div>
                <div class="material-item">
                    <div class="material-image">
                        <img src="https://via.placeholder.com/120" alt="材料图片2" />
                    </div>
                    <el-button type="primary" size="small">加工场合照</el-button>
                </div>
                <div class="material-item">
                    <div class="material-image">
                        <img src="https://via.placeholder.com/120" alt="材料图片3" />
                    </div>
                    <el-button type="primary" size="small">质检证明</el-button>
                </div>
                <div class="add-image">
                    <el-button type="primary" plain class="add-button">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'

defineProps<{
    title: string
    batch: string
}>()
</script>

<style scoped>
.breeding-section {
    background-color: #f9fafc;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 30px;
}

.section-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-header h4 {
    font-size: 18px;
    margin-bottom: 0;
    color: #333;
}

.section-actions {
    display: flex;
    gap: 10px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.info-row {
    margin-bottom: 15px;
    display: flex;
}

.info-label {
    width: 120px;
    color: #666;
    font-weight: bold;
}

.info-value {
    color: #333;
}

.section-sub-header {
    margin-top: 20px;
    margin-bottom: 15px;
}

.section-sub-header h5 {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

.materials-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.materials-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.material-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.material-image {
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 4px;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f7fa;
}

.material-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.add-image {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-button {
    padding: 0;
    margin: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #409eff;
    color: white;
}
</style>